<template>
  <div class="container">
    <el-card>
      <div style="margin-bottom:10px" v-if="id">
  <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item>学科管理</el-breadcrumb-item>
  <el-breadcrumb-item>{{$route.query.subjectName}}</el-breadcrumb-item>
  <el-breadcrumb-item>目录管理</el-breadcrumb-item>
</el-breadcrumb>
      </div>
      <!-- 分割线 -->
      <el-divider v-if="id"></el-divider>
      <el-form>
        <div class="directory-container">
          <el-col :span="6">
            <el-form-item label="目录名称" prop="tags">
              <el-input
                style="width: 180px; margin-right: 20px"
                placeholder="请输入"
                class="filter-item"
                v-model="dataState.directoryName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="状态">
              <el-select
                class="filter-item"
                style="width: 180px"
                v-model="dataState.state"
                @keyup.enter="handleFilter(item)"
              >
                <el-option
                  v-for="(item, i) in data"
                  :key="i"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-row type="flex" justify="start" :gutter="24">
            <!-- 清除按钮 -->
            <el-col :span="9">
              <el-form-item>
                <div style="margin-right: 0">
                  <el-button size="small" @click="clearInput">清除</el-button>
                </div>
              </el-form-item>
            </el-col>
            <!-- 搜索按钮 -->
            <el-col :span="2">
              <el-form-item>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="handleFilter"
                  >搜索</el-button
                >
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 返回上一级 -->
          <el-col :span="12">
            <el-row type="flex" justify="end">
            <el-button type="text" icon="el-icon-back" @click="$router.back()" v-if="$route.query.id">返回上一科</el-button>
              <el-button
                @click="showDirectory = true"
                size="small"
                style="margin-left: 10px"
                type="success"
                icon="el-icon-edit"
                >新增目录</el-button
              >
            </el-row>
          </el-col>
          <!-- 新增按钮 -->
        </div>
        <el-alert type="info" class="alert" show-icon>
          数据一共{{ counts }}条</el-alert
        >
        <!-- 数据 -->
        <el-table
          :data="dataList"
          fit
          highlight-current-row
        >
          <el-table-column align="center" :label="$t('table.id')" type="index">
            <!-- <template slot-scope="scope"> -->
              <!-- <span>{{ scope.row.id }}</span> -->
            <!-- </template> -->
          </el-table-column>
          <el-table-column align="center" label="所属学科">
            <template slot-scope="scope">
              <span>{{ scope.row.subjectName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="目录名称" align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.directoryName }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建者">
            <template slot-scope="scope">
              <span>{{ scope.row.username }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="创建日期" width="150">
            <template slot-scope="scope">
              <span>{{ scope.row.addDate | parseTimeByString }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="面试题数量">
            <template slot-scope="scope">
              <span>{{ scope.row.totals }}</span>
            </template>
          </el-table-column>
          <!-- 按钮 -->
          <el-table-column align="center" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state === 1">已禁用</span>
              <span v-else>已启用</span>
            </template>
          </el-table-column>
          <!-- 操作按钮 -->
          <el-table-column
            align="center"
            label="操作"
            width="280"
          >
            <template slot-scope="scope">
              <el-button size="mini" @click="handleStatus(scope.row)">
                <span v-if="scope.row.state === 1">启用</span>
                <span v-else>禁用</span>
              </el-button>
              <el-button
                size="mini"
                @click="handleChange(scope.row)"
                :disabled="scope.row.state !== 0"
                >修改</el-button
              >
              <el-button
                :disabled="scope.row.state !== 0"
                size="mini"
                @click="removeData(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="pagination">
          <PageTool
            :paginationPagesize="pagesize"
            :total="counts"
            :current-page="page"
            @pageChange="handleCurrentChange"
            @pageSizeChange="handleSizeChange"
          ></PageTool>
        </div>
      </el-form>
    </el-card>
    <!-- 弹窗 -->
    <DirectroysADD :showDirectory.sync="showDirectory" ref="addDirectory" :id="id" />
  </div>
</template>
<script>
import DirectroysADD from '../components/directorys-add.vue'
import PageTool from '../components/PageDirectorysTool.vue'
import {
  list,
  changeState,
  remove,
  update,
  detail
} from '@/api/hmmm/directorys'
export default {
  data () {
    return {
      btn: 0, // 开关
      id: null,
      data: ['禁用', '启用'], // 控制状态
      dataState: {
        state: '',
        directoryName: '',
        subjectID: ''
        // page: null
      },
      formData: {
        subjectID: undefined,
        directoryName: undefined,
        subjectName: undefined
      },
      counts: null, // 总记录数
      pagesize: 5, // 页容量
      pages: null, // 总页数
      page: 1, // 当前页码
      dataList: [], // 储存目录数据
      filterList: [], // 过滤掉的数据
      showDirectory: false // 控制弹窗
    }
  },
  components: { DirectroysADD, PageTool },
  created () {
    if (this.$route.query.id) {
      this.handleFilter()
    }
    this.list()
    this.id = this.$route.query.id
    // console.log(this.$route.params.subjectName)
  },
  methods: {
    // 获取目录列表
    async list () {
      try {
        const { data } = await list({
          page: this.page,
          pagesize: this.pagesize
        })
        // console.log(data)
        this.dataList = data.items
        this.counts = data.counts
        this.pages = data.pages
        this.pagesize = data.pagesize
        this.page = data.page
      } catch (error) {}
    },
    // 每页显示信息条数
    handleSizeChange (val) {
      this.pagesize = val
      this.list()
    },
    // 进入某一页
    handleCurrentChange (val) {
      this.page = val
      if (this.btn === 1) {
        this.dataList = this.filterList.slice(
          (this.page - 1) * this.pagesize,
          this.page * this.pagesize
        )
      } else {
        // this.btn = 0
        this.list()
      }
    },
    // 禁用按钮
    async handleStatus (val) {
      var status = ''
      if (val.state === 1) {
        val.state = 0
        this.status = '禁用'
      } else {
        val.state = 1
        this.status = '启用'
      }
      var data = {
        id: val.id,
        state: val.state
      }
      try {
        await changeState(data)
        status = data.state === 0 ? '启用' : '禁用'
        this.$message.success('已成功' + status + '!')
        // 刷新列表
        // this.list({
        //   page: this.page,
        //   pagesize: this.pagesize
        // })
      } catch (error) {
        console.log(error)
      }
    },
    // 删除数据
    async removeData (id) {
      try {
        await remove(id)
        // 刷新列表
        this.list()
      } catch (error) {
        console.log(error)
      }
    },
    // 修改数据
    async handleChange (id) {
      this.showDirectory = true
      this.$refs.addDirectory.mulu = '编辑目录'
      // 请求接口
      const { data } = await detail(id)
      // 数据回写
      this.$refs.addDirectory.formData = data
      // 请求接口 获取数据
      await update(data)
      // console.log(this.$refs.addDirectory.formData)
    },
    // 键盘/点击搜索搜索
    async handleFilter () {
      this.btn = 1
      this.page = 1
      // 获取数据重新渲染列表
      if (this.dataState.state === '禁用') {
        this.dataState.state = 1
      } else {
        this.dataState.state = 0
      }

      // 过滤空值
      var filterFormData = {}
      // 学科跳转过来的判断
      if (this.$route.query.id) {
        // 这里设置为空 为了过滤
        this.dataState.directoryName = ''
        this.dataState.state = ''
        this.dataState.subjectID = this.$route.query.id
        const { data } = await list(this.dataState)
        // 给记录数据重新赋值
        this.counts = data.counts
        this.dataList = data.items
      }
      // if (this.dataState.state === '') {

      // }
      for (const key in this.dataState) {
        if (this.dataState[key] || this.dataState[key] === 0) {
          filterFormData[key] = this.dataState[key]
        }
      }
      // if (this.$route.query.id) {
      //   filterFormData.state = this.dataState.state
      // }
      // console.log(filterFormData.state)
      // const { data } = await list({ subjectID: this.$route.query.id })
      const { data } = await list(filterFormData)
      // console.log(data)
      // 给记录数据重新赋值
      this.counts = data.counts
      this.dataList = data.items
      // this.filterList = this.dataList // 过滤过的值
      // 重置表单
      if (this.$route.query.id) {
        this.dataState = {}
      }
      // 清除数据
      this.clearInput()
    },
    // 清除数据
    clearInput () {
      this.dataState = {}
      this.btn = 0
    }
  }
}
</script>

<style scoped lang="scss" >
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 10px;
  text-align: right;
}
.directory-container {
  display: flex;
}
.btn{
  text-align:center;
   display: block;
  width: 73px;height:32px;
  // vertical-align: middle;
;
}
/* /deep/.cell{
width: 150px !important;
} */
</style>
